<template>
	<view>

		<view class="cbg-62b27c" style="height: 190rpx;position: sticky;top:88rpx">
			<view class="h-60"></view>
			<view class="h-34 cfs-fff fs-34 pt-20 pb-20 pl-24 pr-24 ml-24flex f-row-nowrap f-ai-center"
				style="width: fit-content; background-color: #6fba89">
				<text>全部类型</text>
				<text class="inline-block w-4 h-34 cbg-fff mr-22 ml-22"></text>
				<text class="iconfont icon-fenlei fs-34"></text>
			</view>
		</view>
		<view class="cbg-ededed pt-20">
			<view class="ml-16 mr-16 mb-20 radius-12 cbg-fff border-bottom cbg-fff" v-for="(item, index) in dataList"
				:key="index">
				<view style="height: 130rpx;" class="ml-32 mr-32 flex f-ai-center">
					<view class="fs-32 cfs-353535 flex-1">{{ item[0].MMDD }} <text class="ml-12">{{ item[0].isToday ? '今天' :
						item[0].isYesterday ? '昨天' : '' }}</text> </view>
					<view><text class="pt-2 pb-2 pl-4 pr-4 cbg-f2f2f2 fs-24">出</text><text class="ml-12">{{ getNum(item, 0)
							}}</text></view>
					<view class="ml-46"><text class="pt-2 pb-2 pl-4 pr-4 cbg-f2f2f2 fs-24">入</text><text class="ml-12">{{
						getNum(item, 1) }}</text></view>
				</view>
				<block v-for="(itemY) in item" :key="itemY.id">
					<view class="pl-30 pr-30 pt-34 pb-34 grid h-80" style="grid-template: 55rpx 25rpx/95rpx 1fr auto;">
						<view class="h-70 w-70 flex f-row-nowrap f-jc-center f-ai-center"
							:class="itemY.positive ? 'cbg-e6b956' : 'cbg-62b27c'" style="grid-row: 1/-1;border-radius: 50%;"><text
								class="iconfont cfs-fff  fs-32" :class="itemY.iconName"></text></view>
						<view class="mt-12 h-26 fs-26 cfs-353535">{{ itemY.typeStr }}</view>
						<view class="mt-12 h-26 fs-26 cfs-353535 fw-500">{{ (itemY.positive ? '' : '-') + itemY.money }}</view>
						<view class="cfs-b9b9b9 fs-24 ellipsis-1" style="grid-column: 2/-1;"><text>{{ itemY.HHMM }}</text><text
								class="w-2 h-18 inline-block mr-8 ml-8 cbg-b9b9b9"></text><text>{{ itemY.remark }}</text></view>
					</view>
				</block>
			</view>
			<u-loadmore :status="status" loadmoreText="" />
			<view v-if="dataList.length" class="pb-100"></view>

		</view>

	</view>



</template>
<script>


import { fetchZhiChuType, fetchShouRuType } from '@/apis/index'
import MingXiModel from '@/model/mingXi'
import { formatDate } from '@/utils/share'
import { SHOURU_ICON_NAME_MAP, ZHICHU_ICON_NAME_MAP } from '@/utils/map'
import listMixin from '@/mixins/listMixin'
export default {
	name: 'IndexPage',
	mixins: [listMixin],
	data() {
		return {
			zhiChuType: [],
			shouRuType: [],
			YYYYMMDDList: [],
			dataList: [],
		}
	},
	methods: {

		handleData(list) {
			this.dataList.length = 0 //清空数据
			this.YYYYMMDDList.length = 0 //清空数据
			list.forEach(item => {
				//处理相关时间
				formatDate(item.date, (dataInfo) => {
					const { year, month, day, hour, minute, isToday, isYesterday } = dataInfo
					item.YYYYMMDD = `${year}年${month}月${day}日`
					item.MMDD = `${month}月${day}日`
					item.HHMM = `${hour}:${minute}`
					item.isToday = isToday
					item.isYesterday = isYesterday
				})
				//处理type名称
				const typeList = item.positive ? this.shouRuType : this.zhiChuType
				const o = typeList.find(itemY => itemY.id === item.typeId)
				o && (item.typeStr = o.name)
				//处理icon
				const iconMameMap = item.positive ? SHOURU_ICON_NAME_MAP : ZHICHU_ICON_NAME_MAP
				item.iconName = iconMameMap[item.typeId]
				//对数据进行分组 根据每天进行分组
				const index = this.YYYYMMDDList.indexOf(item.YYYYMMDD)
				if (index === -1) {
					//第一次出现
					this.YYYYMMDDList.push(item.YYYYMMDD)
					this.dataList.push([item])
				} else this.dataList[index].push(item)
			})

		},
		getNum(list, type) {
			let shouRuNum = 0
			let zhiChuNum = 0
			list.forEach(item => {
				if (item.positive === true) shouRuNum += item.money
				else zhiChuNum += item.money
			})
			return type === 1 ? shouRuNum.toFixed(1) : zhiChuNum.toFixed(1)

		}

	},
	computed: {},
	beforeCreate() {
		this.listModel = new MingXiModel()
	},
	async created() {
		const [r1, r2] = await Promise.all([fetchZhiChuType(), fetchShouRuType()])
		this.zhiChuType = r1
		this.shouRuType = r2
		this.queryList()
	},
	//上拉加载更多


}
</script>
